<template>
  <div class="mouse_dom">
    <div class="mouse_inner">
      <YsRow class="mouse_wrapper" :gutter="8">
        <YsCol span="6" v-for="(item, index) in detectFileBeans" :key="index" style="margin-bottom:8px">
          <div class="mouse_click_wrapper border_style">
            <div class="hover-pop" @mouseover="mouseOver(item)" @mouseleave="mouseLeave(item)">
              <span class="icon iconfont icon-yiji grade" v-if="item.flaw_level == 1"></span>
              <span class="icon iconfont icon-erji grade" v-if="item.flaw_level == 2"></span>
              <span class="icon iconfont icon-sanji grade" v-if="item.flaw_level == 3"></span>
              <span class="icon iconfont icon-siji grade" v-if="item.flaw_level == 4"></span>
              <img class="service-img" :alt="item.file_name" :src="item.file_url ? imgurl(item.file_url) : ''" :onerror="onErrorImg()">
              <template v-if="item.is_qualified">
                <span v-if="item.is_qualified ? true : false" class="icon icon67 iconfont">&#xe667;</span>
                <span v-else class="icon icon60 iconfont">&#xe660;</span>
              </template>
              <div class="pictureibtn" v-if="item.qualified">
                <div class="pictureiinner">
                  <YsButton class="pictnOne" @click.stop="getReport(item)">查看检测报告</YsButton>
                  <YsDropdown placement="bottom-end" >
                    <YsButton type="primary" class="pictntow" href="javascript:void(0)">
                      下载检测报告
                      <YsIcon type="ios-arrow-down"></YsIcon>
                    </YsButton>
                    <YsDropdownMenu class="pictnthree" slot="list">
                      <YsDropdownItem @click.native="onPrentExport(item,0)">PNG下载</YsDropdownItem>
                      <YsDropdownItem @click.native="onPrentExport(item,1)">PDF下载</YsDropdownItem>
                    </YsDropdownMenu>
                  </YsDropdown>
                </div>
              </div>
            </div>
            <div class="hover-footer border_style" @click="goToDetails(item, index)">
              <span class="text_01">{{ item.file_name }}</span>
            </div>
          </div>
        </YsCol>
      </YsRow>
    </div>
    <div class="pictureiFooter bg_style ">
      <span class="totle text_01">共{{ page.total }}条</span>
      <YsPage @on-change="pageChange" :page-size="job_param.limit_recd" :current="job_param.start_recd" :total="page.total" class="page"></YsPage>
    </div>
    <canvas-temp ref="canvasDom" style="margin-top:100px"></canvas-temp>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import canvasTemp from "_c/tableReport/canvasTemp.vue";
export default {
  name: 'cardList',
  components: {
    canvasTemp
  },
  data() {
    return {
      page: {
        total: 0,
      },
      jobAll: {},
      detectFileBeans: [],
      //请求图片列表参数
      job_param: {
        job_id: null,
        start_recd: 1,//开始数据
        limit_recd: 12,//查询的条数
      },
    }
  },
  mounted() {
    if (this.$route.query && this.$route.query.id) {
      this.job_param.job_id = Number(this.$route.query.id)
      this.getImagseList()
    } else {
      this.$YsMessage.error('未获取到id');
    }
  },
  methods: {
    ...mapActions(['getDetectJobList', 'getFileLastUseTempListAPI']),
    //分页
    pageChange(num) {
      this.job_param.start_recd = num
      this.getImagseList()
    },
    //获取数据
    getImagseList() {
      let parmes = { job_id: this.job_param.job_id, ...this.$parent.$refs.selectorDom.searchBean }
      parmes.file_level = parmes.file_level || null
      this.getDetectJobList({ ...this.job_param, searchBean: parmes }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.jobBean = data.jobBean
          this.$emit("getjob", this.jobBean)
          this.page.total = data.all_recd
          if (data.detectFileBeans && data.detectFileBeans.length > 0) {
            this.detectFileBeans = data.detectFileBeans.map(v => {
              return Object.assign({}, { ...v, qualified: false })
            })
            this.file_id = data.detectFileBeans[0].id
          } else {
            this.jobBean = this.$options.data().jobBean
            this.detectFileBeans = this.$options.data().detectFileBeans
          }
        } else {
          this.jobBean = this.$options.data().jobBean
          this.detectFileBeans = this.$options.data().detectFileBeans
        }
      })
    },
    //调整详情
    goToDetails(item, index) {
      this.$router.push({ path: '/pictureImgDetails', query: { dataDetailsId: item.id, detect_name: this.$route.query.detect_name, dataListId: this.$route.query.id, index: index } });
    },
    onErrorImg() {
      return ("this.οnerrοr=null;this.src=" + '"' + require("../../../assets/images/default-02.png") + '";');
    },
    //获取路径
    imgurl(path) {
      return `${window.GlobalConfig.serviceProxy.BaseUrl}` + path
    },
    mouseOver(item) {
      item.qualified = true
    },
    // 移出
    mouseLeave(item) {
      item.qualified = false
    },
    //查看检测报告
    async getReport(item) {
      let templateBeans = await this.getTempList(item.id)
      let templateObj = templateBeans.find(item => item.is_use)
      if (templateObj) {
        this.$router.push({ name: 'reportPreview', query: { template_id: templateObj.id, file_id: item.id } });
      } else {
        this.$YsMessage.info("未选择模板")
      }
    },

    //获取是否选择过模板
    async getTempList(id) {
      const p = await new Promise((resolve, reject) => {
        this.getFileLastUseTempListAPI({ file_id: id }).then(res => {
          let { data, msg, scode, status } = res;
          if (status === "ok") {
            resolve(data.templateBeans);
          } else {
            resolve([]);
          }
        })
      });
      return p
    },
    // 下载
    async onPrentExport(row, falg) {
      if (row.hasOwnProperty('template_id')) {
        let res = await this.$refs.canvasDom.getParmasData({ template_id: row.template_id, file_id: row.id })
        if (res) {
          setTimeout(() => {
            this.$refs.canvasDom.onExport(falg)
          }, 2000)
        }
      } else {
        this.$YsMessage.info("未选择模板")
      }
    }
  }
}
</script>

<style scoped lang='less'>
.mouse_dom {
  height: calc(100% - 64px);
  .mouse_inner {
    height: calc(100% - 52px);
    overflow: auto;
  }
  .mouse_wrapper {
    overflow: hidden;
    margin-right: 0 !important;
    .mouse_click_wrapper {
      width: 100%;
      border: 1px solid #e1e6f0;
      border-radius: 4px;
      overflow: hidden;

      .labelno {
        position: absolute;
        right: 10px;
        top: 4px;
      }

      .pictureibtn {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;

        background: rgba(0, 0, 0, 0.4);

        .pictureiinner {
          position: absolute;
          left: 50%;
          width: 128px;
          text-align: right;
          top: 46%;
          transform: translate(-50%, -50%);
         /deep/ .ivu-select-dropdown{
            width: 126px;
            margin: 2px 0;
            padding: 0;
            .ivu-dropdown-item{
              padding:4px 15px;
              &:hover{
                background: #ebeef5;
              }
            }
          }

          .pictnOne {
            margin-bottom: 8px;
          }

          .pictntow {
            // text-align: center;
            padding: 0 4px;
          }

          .pictnthree {
            text-align: center;
          }

          button {
            cursor: pointer;
          }
        }
      }

      .hover-pop {
        width: 100%;
        height: 200px;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        .icon-yiji {
          color: #13b38f;
        }

        .icon-erji {
          color: #0091ff;
        }

        .icon-sanji {
          color: #e77930;
        }

        .icon-siji {
          color: #d53939;
        }

        .grade {
          position: absolute;
          right: 12px;
          bottom: 0px;
          font-size: 44px;
          z-index: 99;
        }

        .icon67 {
          position: absolute;
          right: 12px;
          bottom: 4px;
          font-size: 50px;
          color: #fff;
        }

        .icon60 {
          position: absolute;
          right: 12px;
          bottom: 4px;
          font-size: 50px;
          color: rgba(255, 228, 114, 1);
        }

      .service-img {
          position: relative;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          transition: all 1.5s;
          display: block;
        }
      }

      .hover-footer {
        height: 52px;
        line-height: 52px;
        padding: 0 16px;
        cursor: pointer;
        display: flex;
        border-top: 1px solid #e1e6f0;

        &:hover {
          background: rgba(0, 0, 0, 0.05);
          // background: #ebeef5;
        }

        .setting {
          margin-left: auto;
          margin-top: 16px;
          opacity: 0.6;
          z-index: 999;
          position: relative;
        }

        span {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #405680;
        }
      }
    }
  }

  .pictureiFooter {
    display: flex;
    align-items: center;
    padding: 10px 0px 0;

    span {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #405680;
    }

    .page {
      margin-left: auto;
    }
  }
}
</style>